<template>
	<view class="page">
		<view class="bg-header">
			<image src="/static/images/login/bg_header.png"></image>
		</view>
		<view class="container">
			<view class="title">{{ '绑定手机号' | lang }}</view>
			<view class="form">
				<view class="form-item">
					<image class="icon" src="/static/images/login/ic_phone.png"></image>
					<input type="text" @input="inputChange" data-name="phone" maxlength="11" class="input" :placeholder="'手机号' | lang" :value="phone" />
				</view>
				<view class="form-item">
					<image class="icon" src="/static/images/login/ic_code.png"></image>
					<input type="text" @input="inputChange" data-name="code" maxlength="6" class="input" :placeholder="'短信验证码' | lang" />
					<view type="text" class="sendcode" size="small" @click="doSendSms"
						:disabled="sendSmsCountdown > 0">{{ sendSmsCountdown > 0 ? `${sendSmsCountdown}s ` + $lang('后可重发') : $lang('发送验证码') }}</view>
				</view>
				<view class="form-item">
					<image class="icon" src="/static/images/login/ic_pwd.png"></image>
					<input v-if="pwdShow" type="text" @input="inputChange" maxlength="20" data-name="password"
						class="input" :placeholder="'设置登录密码' | lang" :value="password" />
					<input v-else type="password" @input="inputChange" maxlength="20" data-name="password" class="input" :placeholder="'设置登录密码' | lang" :value="password" />
					<image v-if="pwdShow" class="eye" @tap="hidePwd" src="/static/images/login/ic_eye.png">
					</image>
					<image v-else class="eye" @tap="showPwd" src="/static/images/login/ic_eye_open.png"></image>
				</view>

				<view class="form-item">
					<button class="btn btn-submit" @tap="doSubmit">{{ '确定提交' | lang }}</button>
				</view>
			</view>
		</view>

		<sendsms v-if="sendSmsShow" :phone="phone" type="bind" :sitecode="sitecode" @success="sendSmsSuccess" @close="sendSmsClose">
		</sendsms>
	</view>
</template>

<script>
	import sendsms from '@/components/sendsms/index';
	const app = getApp();
	export default {
		components: {
			sendsms
		},
		data() {
			return {
				sitecode: '',
				phone: '',
				password: '',
				code: '',
				pwdShow: false,
				sendSmsShow: false,
				sendSmsCountdown: 0
			}
		},
		onLoad(options) {
			if (options.phone) {
				this.setData({
					phone: options.phone
				})
			}
			let sitecode = uni.getStorageSync('sitecode')
			this.setData({
				sitecode: sitecode ? sitecode : ''
			})
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$lang('绑定手机号')
			})
		},
		methods: {
			doSendSms() {
				const phone = this.phone
				if (!phone || (window.$lang === 'zh-cn' && phone.length !== 11)) {
					app.globalData.util.message('请输入正确的手机号')
					return
				}
				this.sendSmsShow = true
			},
			sendSmsClose() {
				this.sendSmsShow = false
			},
			sendSmsSuccess() {
				this.sendSmsClose()
				this.sendSmsCountdown = 60
				this.doCountdown()
			},
			doCountdown() {
				if (this.sendSmsCountdown > 0) {
					this.sendSmsCountdown -= 1
					setTimeout(() => {
						this.doCountdown()
					}, 1000)
				}
			},
			doSubmit() {
				const sitecode = this.sitecode
				const phone = this.phone
				const code = this.code
				const password = this.password
				if (!phone) {
					app.globalData.util.message('请输入手机号')
					return
				}
				if (phone.length !== 11) {
					app.globalData.util.message('手机号码格式不正确')
					return
				}
				if (!code) {
					app.globalData.util.message('请输入短信验证码')
					return
				}
				if (!password) {
					app.globalData.util.message('请输入登录密码')
					return
				}
				app.globalData.util.request({
					url: '/user/bindPhone',
					data: {
						phone: phone,
						password: password,
						code: code
					},
				}).then((res) => {
					app.globalData.util.message(res.message, 'success')
					this.toBack()
				})
			},


			toBack() {
				uni.navigateBack({
					fail: function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			
			inputChange(e) {
				let name = e.currentTarget.dataset.name;
				let value = e.detail.value;
				this.setData({
					[name]: value
				});
			},

			showPwd() {
				this.setData({
					pwdShow: true
				})
			},

			hidePwd() {
				this.setData({
					pwdShow: false
				})
			}
		}
	};
</script>
<style>
	.page {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f2f8f8;
		z-index: 1;
	}
	.bg-header {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 450rpx;
	    z-index: 2;
	}
	.bg-footer {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 360rpx;
	    z-index: 2;
	}
	.bg-header image, .bg-footer image {
	    width: 100%;
	    height: 100%;
	}
	.container {
	    width: 100%;
	    box-sizing: border-box;
	    position: absolute;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    padding: 0 88rpx;
	    z-index: 3;
	}
	.container .title {
	    font-size: 48rpx;
	    text-align: center;
	    margin-top: 180rpx;
	    letter-spacing: 4rpx;
	    color: #1b1c1c;
	    font-weight: bold;
	}
	
	.btn-group {
		margin-top: 200rpx;
	}
	
	.btn {
		background: #04babe;
		border-radius: 10rpx;
		width: 100%;
		height: 100rpx;
		font-size: 36rpx;
		margin: 0 auto;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	
	.btn:active {
		opacity: 0.8;
	}
	
	.btn image {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
	}
	
	.btn-phone {
		color: #04babe;
		background: #fff;
		border: 2rpx solid #04babe;
		margin-top: 50rpx;
	}
	
	.btn-submit {
		height: 88rpx;
		margin-top: 40rpx;
	}
		
	.form {
		margin-top: 140rpx;
	}
	
	.form .form-item {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.form .form-item .input {
		width: 100%;
		border: 4rpx solid #dadede;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 88rpx;
		background: #fff;
		border-radius: 50rpx;
	}
	
	.form .form-item .sendcode {
		position: absolute;
		right: 24rpx;
		top: 20rpx;
		font-size: 24rpx;
		color: #889aa4;
		user-select: none;
		background: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	
	.form .form-item .sendcode:active {
		background: #f8f8f8;
	}
	
	.form .form-item .icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 36rpx;
		top: 32rpx;
	}
	
	.form .form-item .eye {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 36rpx;
		top: 32rpx;
		z-index: 10;
	}
</style>